<template>
  <view class="contain">
    <view class="flex tabbox">
      <image
        v-if="checked == 1"
        class="checkleft"
        mode="widthFix"
        src="@/static/img/checkleft.png"
      ></image>
      <image
        v-if="checked == 2"
        class="checkright"
        mode="widthFix"
        src="@/static/img/checkright.png"
      ></image>
      <view class="tabitem" @tap="checked = 1">上门回收</view>
      <view class="tabitem" @tap="checked = 2">邮寄出售</view>
    </view>

    <view class="stepbox flexCenterCenter">
      <view class="flexCenter" v-for="(item, index) in list" :key="item.name">
        <view class="stepitem">
          <image
            class="stepicon"
            mode="widthFix"
            src="@/static/img/stepicon1.png"
          ></image>
          <view class="textname">{{ item.name }}</view>
        </view>
        <image
          v-if="index != 4"
          class="dianline"
          mode="widthFix"
          src="@/static/img/dianline.png"
        ></image>
      </view>
    </view>
    <view>
      <image
        class="stept1"
        mode="widthFix"
        src="@/static/img/stept1.png"
      ></image>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
const list = ref([
  {
    name: "出售闲置",
  },
  {
    name: "选择品类",
  },
  {
    name: "提交订单",
  },
  {
    name: "填写地址",
  },
  {
    name: "回收打款",
  },
]);
const checked = ref(1);
onLoad((options)=>{
if(options.key==2){
  checked.value=2
}
})
</script>
<style>
  page{
    background: #F4F4F4 ;
    padding: 22rpx;
    box-sizing: border-box;
  }
</style>
<style lang="scss" scoped>
.contain {
  background: #ffffff;
    text-align: center;
    margin-bottom: 20px;
    border-radius: 20rpx;
    padding-bottom: 20rpx;
}
.tabbox {
  position: relative;
  height: 82rpx;
  line-height: 82rpx;
  background: linear-gradient(180deg, #f4f4f4 0%, #ffffff 100%);
  border-radius: 20rpx;
  border: 2px solid #ffffff;
  text-align: center;
  box-sizing: border-box;
}
.tabitem {
  flex: 1;
  line-height: 82rpx;
  position: relative;
  z-index: 3;
  text-align: center;
}
.checkleft {
  position: absolute;
  left: 0;
  top: -2rpx;
  width: 387rpx;
  height: 82rpx;
  z-index: 2;
}
.checkright {
  position: absolute;
  right: 0;
  top: -2rpx;
  width: 387rpx;
  height: 82rpx;
  z-index: 2;
}
.stepbox {
  padding: 22rpx;
  .stepitem {
    text-align: center;
  }
  .stepicon {
    width: 38rpx;
    height: 38rpx;
  }
  .dianline {
    width: 33rpx;
    height: 4rpx;
  }
}
.stept1 {
  width: 549rpx;
  height: 1538rpx;
  /* height: 1536rpx; */
}
.textname{
  font-size: 22rpx;
}
</style>
